<template>
	<view class="content">
		<!-- <image class="logo" src="../../static/banner.png"></image> -->
		<view class="title body-title"><h3>胖猫估值</h3></view>
		<view class="table-body">
			<view class="header-title">
				<view><span style="text-align: center;"><h3> 宽基指数</h3></span> </view>
				<view><span style="text-align: center;"><h3> 指数代码</h3></span> </view>
				<view><span style="text-align: center;"><h3> PE温度</h3></span> </view>
				<view><span style="text-align: center;"><h3> PB温度</h3></span> </view>
				<view><span style="text-align: center;"><h3> 偷懒</h3></span> </view>
			</view>	
			<view class="table-content" v-for="stock in stocksList" :key='stock.id' @click="togglePopup('center', 'popup',stock.id)">
				<view><span style="text-align: center;"> <div>{{stock.title}}</div></span> </view>
				<view><span style="text-align: center;"> <div>{{stock.code}}</div></span> </view>
				<view><span style="text-align: center;"> <div>{{Math.round(stock.pe_temp*100)/100 }}</div></span> </view>
				<view><span style="text-align: center;"> <div>{{Math.round(stock.pb_temp*100)/100 }}</div></span> </view>
				<view><span style="text-align: center;"> <div v-bind:style="{color:stock.fontColor}">{{Math.round(stock.index_temp*100)/100}}</div></span> </view>
			</view>	
			<uni-popup :show="showpopup" type="center" @change="change">
				<view class="popup-inside-block">
					<view class="popup-inside-block-title"><h2>更多数据</h2></view>
					<view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">宽基指数</view>
						<view class="popup-inside-block-comlum2">{{popupData.title}}</view>
					</view>
					<view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">指数代码</view>
						<view class="popup-inside-block-comlum2">{{popupData.code}}</view>
					</view>
					
					<!-- <view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">场内</view>
						<view class="popup-inside-block-comlum2">{{popupData.code}}</view>
					</view>
					
					<view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">场外</view>
						<view class="popup-inside-block-comlum2">{{popupData.code}}</view>
					</view> -->
					
					<view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">PE温度</view>
						<view class="popup-inside-block-comlum2">{{Math.round(popupData.pe_temp)}}</view>
					</view>
					<view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">PB温度</view>
						<view class="popup-inside-block-comlum2">{{Math.round(popupData.pb_temp)}}</view>
					</view>
					<view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">偷懒</view>
						<view class="popup-inside-block-comlum2">{{Math.round(popupData.index_temp)}}</view>
					</view>
					<!-- <view class="popup-inside-block-row">
						<view class="popup-inside-block-comlum1">ROE</view>
						<view class="popup-inside-block-comlum2">99.99</view>
					</view> -->
				</view>
				
			</uni-popup>
<!-- 			<view class="table-content" >
				<view>十年国债</view>
				<view>3.23</view>
			</view>	 -->
		</view>
<!-- 		<view style="align-self:flex-start;height: 110rpx; ">
			<view>1.绿色代表PB和PE分位点都抵御20%</view>
			<view>2.黄色代表PB和PE分为点都不高于70%</view>
			<view>3.红色代表PB和PE分为点都高于70%</view>
			
		</view> -->
		<!-- <image class="footer" src="../../static/footer.png"></image> -->
		<view class="copyright">Copyright © 2020 偷懒的加菲</view>
	</view>
	
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			// uniSection,
			uniPopup,
			// uniIcons
		},
		data() {
			return {
				stocksList:[],
				showpopup: false,
				type: '',
				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
				content: '顶部弹 popup',
				popupData:{},
				fontColor:'red'
			}
			
		},
		computed: {
			
		},
		async onLoad(e) {
			console.log(e.id)
			this.postLog(e.id)
			let stockList = await this.getStockList();
			this.stocksList = stockList;
			
			for(let i=0;i<this.stocksList.length;i++)
			{
		
				if(this.stocksList[i].index_temp<=10){
						this.stocksList[i].fontColor = '#33FF66';
				} else if(this.stocksList[i].index_temp>10 
							&& this.stocksList[i].index_temp<=30){
					this.stocksList[i].fontColor = '#FFCC33';
				} else if (this.stocksList[i].index_temp>30 
							&& this.stocksList[i].index_temp<=40){
					this.stocksList[i].fontColor = '#FF9900';
				}else if (this.stocksList[i].index_temp>40 
							&& this.stocksList[i].index_temp<=50){
					this.stocksList[i].fontColor = '#CC33FF';
				} else if (this.stocksList[i].index_temp>50 
							&& this.stocksList[i].index_temp<=60 ){
					this.stocksList[i].fontColor = '#FF3333';			
				}else{
					this.stocksList[i].fontColor = '#990033';
				}
			}
			
			console.log(stockList)
		},
		methods: {
			async postLog(data){
				// await this.$api.postLog(data);
			},
			async getStockList(){
				let res =  await this.$api.getStockList();
				return res.data;
			},
			togglePopup(type, open,id) {
				this.type = type
				for(let i=0;i<this.stocksList.length;i++)
				{
					if(this.stocksList[i].id == id)
					{
						this.popupData = this.stocksList[i];
						// this['show' + open] = true
						break;
					}
				}
				
			},
			onBackPress() {
				console.log('showpopup', this.showpopup)
				console.log('showtip', this.showtip);
				console.log('showimage', this.showimage);
				console.log('showshare', this.showshare);
				if (this.showpopup || this.showtip || this.showimage || this.showshare) {
					this.showpopup = false
					this.showtip = false
					this.showimage = false
					this.showshare = false
					return true
				}
			},
			change(e) {
				console.log('是否打开:' + e.show)
				if (!e.show) {
					this.showpopup = false
					this.showtip = false
					this.showimage = false
					this.showshare = false
				}
			}
		}
	}
</script>

<style>
	.body-title{
		margin-top: 100rpx;
		margin-bottom: 50rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
	}
	.table-body{
		width:90%;
	}
	.header-title{
		display: flex;
		flex-direction:row;
		align-items: baseline;
		justify-content: space-between;
	}
	
	.header-title view{
		width:128rpx;
		
	}
	.header-title view:first-child{
		width:175rpx;
	}
	
	.table-content{
		display: flex;
		flex-direction:row;
		align-items: baseline;
		justify-content: space-between;
		margin: 30rpx 0;
	}
	.table-content view{
		width:128rpx;
	}
	.table-content view:first-child{
		width:175rpx;
	}
	.logo{
		width:100%;
		height: 300rpx;
	}
	.footer{
		width:100%;
		/* height: 150rpx; */
		/* margin-top: 50rpx; */
	}
	
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.copyright {
		/* position: fixed; */
		bottom: 20rpx;
		font-size: 24rpx;
		height: 60rpx;
		/* color: #ffffff; */
		color: gray;
	}
	.popup-inside-block{
		background-color: white;
		width:500rpx;
		height: 520rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		border-radius: 25rpx;
	}
	.popup-inside-block-row{
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-bottom: 20rpx;
	}
	.popup-inside-block-comlum1{
		width: 30%;
		margin-left: 20%;
	}
	.popup-inside-block-comlum2{
		width: 30%;
		margin-left: 10%;
	}
	.popup-inside-block-title{
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}
</style>
